<template>
    <div class="layout-align-warp">

        <div class="branding-align-image" :class="{active:activeLayer == imageLayer}">

            <h3>
                <figure>
                    <img crossOrigin="anonymous" :style="$fiexImage(imageLayer.w,imageLayer.h,1)" v-lazy="$getImageUrl(imageLayer.url,'mini')" />
                </figure>
                <strong v-text="imageLayer.name"></strong>
            </h3>

            <div class="factor-align">
                <button @click="setAlign('image', 'left')">
                    <svg-icon name="tooler-left" />
                </button>
                <button @click="setAlign('image', 'center')">
                    <svg-icon name="tooler-center" />
                </button>
                <button @click="setAlign('image', 'right')">
                    <svg-icon name="tooler-right" />
                </button>
                <button @click="setAlign('image', 'top')">
                    <svg-icon name="tooler-top" />
                </button>
                <button @click="setAlign('image', 'middle')">
                    <svg-icon name="tooler-middle" />
                </button>
                <button @click="setAlign('image', 'bottom')">
                    <svg-icon name="tooler-bottom" />
                </button>
            </div>
        </div>

        <div class="branding-align-size" :class="{active:activeLayer == textLayer}">
            <h3>Size</h3>

            <div class="factor-size">
                <button :class="{active: textLayer.text == 'XS' }" @click="setText('XS')">XS</button>
                <button :class="{active: textLayer.text == 'S' }" @click="setText('S')">S</button>
                <button :class="{active: textLayer.text == 'M' }" @click="setText('M')">M</button>
                <button :class="{active: textLayer.text == 'L' }" @click="setText('L')">L</button>
                <button :class="{active: textLayer.text == 'XL' }" @click="setText('XL')">XL</button>
                <button :class="{active: textLayer.text == '2XL' }" @click="setText('2XL')">2XL</button>
                <button :class="{active: textLayer.text == '3XL' }" @click="setText('3XL')">3XL</button>
                <button :class="{active: textLayer.text == '4XL' }" @click="setText('4XL')">4XL</button>
                <button :class="{active: textLayer.text == '5XL' }" @click="setText('5XL')">5XL</button>
            </div>
            <div class="factor-color">
                <UxColorPicker name="Color" v-model="fontColor" />
                <UxInputNumber name="Font size" unit="%" v-model="layerFontSize" :min="1" :max="1000" :step="0.1" :precision="2" />
            </div>

            <div class="factor-align">
                <button @click="setAlign('size', 'left')">
                    <svg-icon name="tooler-left" />
                </button>
                <button @click="setAlign('size', 'center')">
                    <svg-icon name="tooler-center" />
                </button>
                <button @click="setAlign('size', 'right')">
                    <svg-icon name="tooler-right" />
                </button>
                <button @click="setAlign('size', 'top')">
                    <svg-icon name="tooler-top" />
                </button>
                <button @click="setAlign('size', 'middle')">
                    <svg-icon name="tooler-middle" />
                </button>
                <button @click="setAlign('size', 'bottom')">
                    <svg-icon name="tooler-bottom" />
                </button>
            </div>

            <p><i class="iconfont icon-xiangqing1"></i>The letter size printed out will depend on the actual size of the garment you order.</p>

        </div>

    </div>
</template>
<script>
import DesignUtils from "@/utils/DesignUtils.js";
export default {
    name: "BrandingNecklabelEditorTooler",
    props: {
        activePiece: { type: Object, default: null },
        activeLayer: { type: Object, default: null },
    },

    data () {
        return {
            editor: null,
            change: false,
            saving: '',
            cache: '',
        };
    },

    computed: {
        imageLayer () {
            const piece = this.activePiece || {};
            const layers = piece.layers || [];
            return layers[0] || {}
        },

        textLayer () {
            const piece = this.activePiece || {};
            const layers = piece.layers || [];
            return layers[1] || {}
        },

        fontColor: {
            get () {
                const text = this.textLayer || {}
                return text.font_color || '';
            },
            set (v) {
                const text = this.textLayer || {}
                text.font_color = v;
            }
        },
        layerFontSize: {
            get () {
                const piece = this.activePiece || {};
                const text = this.textLayer || {}
                const w = piece.canvas_width || 1;
                const h = piece.canvas_height || 1;
                return 100 * text.font_size / Math.min(w, h);
            },
            set (value) {

                const piece = this.activePiece || {};
                const text = this.textLayer || {}
                const w = piece.canvas_width || 1;
                const h = piece.canvas_height || 1;

                const format = 0.01 * value * Math.min(w, h);

                if (text.font_size != format) {

                    const style = {
                        textAlign: 'center',
                        fontFamily: text.font_family,
                        fontSize: format,
                        lineHeight: format,
                        charSpacing: text.letter_spacing,
                    }
                    const size = DesignUtils.getTextSize(text.text, style);
                    text.x = text.x + (text.w - size.width) / 2;
                    text.y = text.y + (text.h - size.height) / 2;
                    text.w = size.width;
                    text.h = size.height;
                    text.font_size = format;
                }
            }
        },
    },

    methods: {

        // 对齐
        setAlign (type, align) {

            const piece = this.activePiece || {};
            const layer = type == 'image' ? this.imageLayer : this.textLayer;

            if (align == 'left') {
                // 水平居左
                layer.x = 0;
            } else if (align == 'center') {
                // 水平居中
                layer.x = 0.5 * (piece.canvas_width - layer.w);
            } else if (align == 'right') {
                // 水平居右
                layer.x = piece.canvas_width - layer.w;
            } else if (align == 'top') {
                // 垂直居上
                layer.y = 0;
            } else if (align == 'middle') {
                // 垂直居中
                layer.y = 0.5 * (piece.canvas_height - layer.h);
            } else if (align == 'bottom') {
                // 垂直居下
                layer.y = piece.canvas_height - layer.h;
            }
        },

        setText (text) {

            const piece = this.activePiece || {};
            const layer = this.textLayer;

            const style = {
                textAlign: 'center',
                fontFamily: layer.font_family,
                fontSize: layer.font_size,
                lineHeight: layer.font_size,
                charSpacing: layer.letter_spacing,
            }
            const size = DesignUtils.getTextSize(text, style);
            layer.text = text;
            layer.x = layer.x + (layer.w - size.width) / 2;
            layer.y = layer.y + (layer.h - size.height) / 2;
            layer.w = size.width;
            layer.h = size.height;

        },

    },
    created () {
    },
};
</script>
<style lang="scss" scoped>
.layout-align-warp {
    padding: 0 16px 16px;
    flex: 1;
    overflow: auto;

    h2 {
        font-size: 22px;
        color: #000000;
        line-height: 24px;
        padding: 32px 0;
        text-align: center;
    }

    .branding-align-image {
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #c6c6c6;
        overflow: hidden;

        &.active {
            border-color: #ea4c89;
        }

        h3 {
            display: flex;
            height: 60px;
            background: #f6f6f6;
            border-bottom: 1px solid #ededed;
            white-space: nowrap;
            figure {
                width: 40px;
                min-width: 40px;
                height: 40px;
                margin: 10px;
                position: relative;
                border-radius: 2px;
                overflow: hidden;
                &::after {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    top: 0;
                    border: 1px solid #ddd;
                    border-radius: 2px;
                }
                img {
                    position: absolute;
                }
            }
            strong {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 60px;
                margin-left: 2px;
                font-size: 14px;
                color: #000000;
                font-family: Roboto-Medium;
                font-weight: normal;
            }
        }
    }

    .branding-align-size {
        overflow: hidden;
        margin-top: 24px;
        background: #ffffff;
        border-radius: 6px;
        border: 1px solid #c6c6c6;
        padding-bottom: 26px;
        &.active {
            border-color: #ea4c89;
        }

        h3 {
            height: 40px;
            line-height: 40px;
            background: #f6f6f6;
            border-bottom: 1px solid #ededed;
            text-align: center;
            font-size: 14px;
            color: #000000;
        }

        & > p {
            margin: 0 16px;
            background: #f6f6f6;
            border-radius: 6px;
            position: relative;
            font-size: 12px;
            color: #000000;
            line-height: 18px;
            padding: 7px 12px 7px 28px;

            i {
                position: absolute;
                width: 12px;
                height: 18px;
                line-height: 18px;
                font-size: 12px;
                left: 12px;
                top: 7px;
                color: #acacac;
            }
        }
    }
}

.factor-align {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    button {
        margin: 5px 0;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        background: none;
        border: none;
        font-size: 22px;
        color: #666;
        position: relative;

        &:nth-child(3) {
            margin-right: 20px;
        }
        svg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
            color: #555;
        }

        &:hover {
            svg {
                color: #ea4c89;
            }
        }
    }
}

.factor-size {
    padding: 16px 12px;
    display: flex;
    flex-wrap: wrap;
    button {
        width: 42px;
        height: 32px;
        margin: 4px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
        color: #666;
        border-radius: 4px;

        &.active {
            color: #ea4c89;
            border-color: #ea4c89;
        }
    }
}

.factor-color {
    margin: 0 16px 0;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    padding: 24px 0;

    .input-number {
        width: 120px;
        margin-left: 42px;
    }
}
</style>
